<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="LayoutIt">
    <title>综合管理平台</title>

    <!-- 核心样式开始 -->
    <link href="css/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/css/jquery-ui.min.css">
    <link rel="stylesheet" href="./css/css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="./css/css/jquery.datetimepicker.css">

    <link rel="stylesheet" href="./css/base.css">
    <link title="blue" href="css/blue.css" rel="stylesheet">
    <link title="purpleBlue" href="css/purpleBlue.css" rel="stylesheet" disabled="disabled">
    <link title="golden" href="css/golden.css" rel="stylesheet" disabled="disabled">
    <!--核心样式结束-->

    <link rel="stylesheet" href="css/report.css">


    <!-- Fav and touch fa fas -->
    <link rel="shortcut icon" href="image/favicon.ico">

    <!--核心js文件开始-->
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="js/js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/js/jquery-2.1.4.min.js"></script>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/js/jquery-1.12.0.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/js/jquery.ui.touch-punch.min.js"></script>
    <script src="./js/js/jquery.cookie.js"></script>
    <script src="./js/js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="./js/js/jquery.datetimepicker.js"></script>
    <script src="./js/common.js"></script>
    <!--核心js文件结束-->
    <script type="text/javascript" src="js/nav.js"></script>
</head>

<body style="cursor: auto; overflow: hidden;" class="edit">
<!-- 头部开始 -->
<!-- 头部结束 -->

<div class="container-fluid">
    <div class="row-fluid">
        <!-- 菜单栏开始 BEGIN SIDEBAR MENU -->
        <div class="">
            <div class="sidebar-nav">
                <!-- 侧边按钮开始 BEGIN SIDEBAR TOGGLER BUTTON -->
                <div class="clearfix">
                    <div class="sidebar-toggler hidden-phone zoom-out" id="devpreview1"><i
                            class="fa fa-angle-left fa fa-2x"></i></div>
                </div>
                <!-- 侧边按钮结束 BEGIN SIDEBAR TOGGLER BUTTON -->

                <!-- 响应快速搜索表单开始 BEGIN RESPONSIVE QUICK SEARCH FORM -->
                <form class="sidebar-search">
                    <div class="input-box">
                        <a href="javascript:;" class="remove"></a>
                        <input type="text" placeholder="Search..."/>
                        <div class="submit"><i class="fa fa-search"></i></div>
                    </div>
                </form>
                <!-- 响应快速搜索表单结束 END RESPONSIVE QUICK SEARCH FORM -->

                <!-- 左侧导航开始 -->
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="index.html"><i class="fa fa-home"></i><span class="title">首页</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="servers.html"><i class="fa fa-sitemap"></i><span class="title">服务器</span></a>
                    </li>
                    <li style="display: none;" class="rows" id="estRows">
                        <div class="lyrow large ui-draggable" index="0">
                            <a href="#close" class="remove label label-important"><i class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">深圳</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index="1">
                            <a href="#close" class="remove label label-important"><i class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">广州</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index='2'>
                            <a href="#close" class="remove label label-important"><i class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">香港</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lyrow large ui-draggable" index="3">
                            <a href="#close" class="remove label label-important"><i class="fa fa-remove fa fa-white"></i></a>
                            <span class="drag label">澳门</span>
                            <div class="view">
                                <div class="row-fluid clearfix">
                                    <div class="span12 column">
                                        <div class="viewHead">
                                            <div class="crowd">吞吐量(流入和流出)</div>
                                            <div class="begin">
                                                <input type="text" name="begin" class="dtpicker">
                                            </div>
                                            <div class="end">
                                                <input type="text" name="end" class="dtpicker">
                                            </div>
                                            <div class="lastHour">最近一小时</div>
                                            <div class="submit">
                                                <i class="fa fa-check"></i>
                                                <input type="hidden" name="">
                                                <input type="hidden" name="">
                                            </div>
                                        </div>
                                        <iframe class='model-data' src=""></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="topology.html"><i class="fa fa-bar-chart"></i><span class="title">业务拓扑</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group bg-color">
                    <li class="nav-header">
                        <a href="report.html"><i class="fa fa-list-alt"></i><span class="title">服务质量报告</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <a href="users.html"><i class="fa fa-users"></i><span class="title">用户设置</span></a>
                    </li>
                </ul>
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <i class="fa fa-plus <!--fa fa-white-->"></i>
                        <span class="title">应用扩展</span>
                    </li>
                    <li style="display: none;" class="rows mute" id="elmComm">
                        <div class="preview">建设中...</div>
                    </li>
                </ul>
                <!-- 左侧导航结束 -->
            </div>
        </div>
        <!-- 菜单栏结束 END SIDEBAR MENU -->

        <!-- 视图区域开始 -->
        <div id="content-md">
            <div class="report-m viewArea">
                <div class="r-m-header  viewArea-h">健康状态</div>
                <div class="r-m-content viewArea-c">
                    <div class="content-m">
                        <div class="c-top">
                            <div class="c-state">
                                <div class="rad-prg" id="indicatorContainer"></div>
                            </div>
                            <div class="prompt">
                                <h2>目前健康状态</h2>
                                <ul>
                                    <li class="rendering">服务器响应时间良好</li>
                                    <li class="app-error">应用错误信息严重，请尽快解决！</li>
                                    <li class="slow-page">慢页面率稍有问题，请尽快解决！</li>
                                    <li class="http-error">HTTP错误信息良好</li>
                                    <li class="retransmission">重传信息良好</li>
                                </ul>
                            </div>
                            <div class="redetect">重新检测</div>
                        </div>
                        <div class="c-line"></div>
                        <div class="c-bottom">
                            <ul>
                                <li>
                                    <div class="graphics">
                                        <div class="rendering data">
                                            <span class="rendering">0.02s</span>
                                        </div>
                                        <span class="rendering ">服务器响应时间</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="graphics">
                                        <div class="app-error data">
                                            <span class="app-error">25个</span>
                                        </div>
                                        <span class="app-error">应用错误数</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="graphics">
                                        <div class="slow-page data">
                                            <div id="preview">
                                                <canvas id="canvas-preview"></canvas>
                                                <div id="preview-textfield"></div>
                                            </div>
                                        </div>
                                        <span class="slow-page">慢页面率</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="graphics">
                                        <div class="http-error data">
                                            <span class="http-error">0个</span>
                                        </div>
                                        <span class="http-error">HTTP错误</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="graphics">
                                        <div class="retransmission data">
                                            <span class="retransmission">0次</span>
                                        </div>
                                        <span class="retransmission">重传</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 视图区域结束 -->
    </div>
</div>

<!--<div class="footer" style="text-align:center;">-->
<!--<p>From:<a href="http://182.92.168.13/" target="_blank">77Element</a></p>-->
<!--</div>-->
<script src="js/js/radialIndicator.js"></script>
<script src="js/js/gauge.js"></script>
<script>



    $(function () {
        $('.prompt').width($('.content-m').width()-315);
        $(window).resize(function () {
            $('.prompt').width($('.content-m').width()-315);

        })

        var radialObj4 = $('#indicatorContainer').radialIndicator({
            radius: 80,//圆的高宽计算为：(自定义总宽-10)/2,需要200px高宽为：(200-10)/2
            barColor: {
                0: '#FF0000',
                33: '#FFFF00',
                66: '#0066FF',
                100: '#33CC33'
            },
            percentage: true
        }).data('radialIndicator');
        radialObj4.animate(60);

        $('.redetect').click(function(){
            radialObj4.animate(60);
        })

        var opts = {
            lines: 12, // 画的行数
            angle: 0, // 每一行的长度
            lineWidth: 0.2, // 线厚度
            pointer: {
                length: 1, // 内圆的半径
                strokeWidth: 0.035, // 旋转抵消
                color: '#fff' // 填充颜色
            },
            limitMax: 'false',   // 如果这是真的,指针不会过去的判断
            colorStart: '#6FADCF',   // Colors
            colorStop: '#8FC0DA',    // 只是实验与他们
            strokeColor: '#fff',   // 看看哪些最适合你
            generateGradient: true
        };
        var target = document.getElementById('canvas-preview'); // canvas元素
        var gauge = new Gauge(target).setOptions(opts); // 创建性感计！
        gauge.setTextField(document.getElementById("preview-textfield"));
        gauge.maxValue = 100; // 设置最大值
        gauge.animationSpeed = 10; // 设置动画速度（32默认值）
        gauge.set(10); // 设置实际值
    })
</script>

</body>
</html>